<template>
	<div>
		<el-drawer v-model="state.show" title="搜索订单">
			<div class="mar20">
				<el-form label-width="100px">
					<el-form-item label="商品名称:">
						<el-input v-model="state.search.goodsName" placeholder="请输入商品名称" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer mr20 mb20">
					<el-button @click="onCancel" size="large" type="primary">取 消</el-button>
					<el-button @click="search" size="large" type="primary">搜索</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const state = reactive({
	show: false,
	search: {
		goodsName: '',
	},
});

const emits = defineEmits(['handleSearch']);

const onCancel = () => {
	state.show = false;
};

const search = () => {
	emits('handleSearch', {});
};

const handleOpen = () => {
	state.show = true;
};

defineExpose({ handleOpen });
</script>

<style scoped lang="scss">
:deep(.el-input-group__prepend) {
	padding: 0px !important;
}
</style>
